<template>
    <article class="homeNews">
        <header class="homeNews-header">
            <p class="font-44 font-600">新闻</p>
            <p class="font-30">更多 ></p>
        </header>
        <main class="homeNews-main">
            <div class="main-box" v-for="(item,index) in newList" :key="index">
                <figure v-if="!getIndex(index)">
                    <img class="box-img" :src="item.imgURL">
                </figure>
                <div>
                    <div class="font-Omit-two mb-12">
                        <span class="box-index" v-if="getIndex(index)">{{ index + 1 }}</span>
                        <span class="font-28">{{ item.title }}</span>
                    </div>
                    <div v-if="!getIndex(index)">
                        <p class="font-24 mb-22 font-Omit-two" style="color: #6E6E78;">{{ item.text }}</p>
                        <p class="font-28 pt-15" style="color: #6E6E78;">{{ item.time }}</p>
                    </div>
                </div>
            </div>
        </main>
    </article>
</template>

<script>
export default {
    data() {
        return {
            newList:[
                {
                    id:0,
                    title:'unique network 引领 polkdot 跨链 nft 传输',
                    text:'荷兰阿姆斯特丹，2024 年 9 月 18 日， chainwire token 2049 与会者可以收集...',
                    time:'2024-09-18 04:30:33',
                    imgURL:new URL('@/assets/image/home/licai2.png',import.meta.url).href,
                },
                {
                    id:1,
                    title:'比特币今日价格：因降息押注和etf流动性改善，比特币价格上涨至6万美元',
                    text:'荷兰阿姆斯特丹，2024 年 9 月 18 日， chainwire token 2049 与会者可以收集...',
                    time:'2024-09-18 04:30:33',
                    imgURL:new URL('@/assets/image/home/licai2.png',import.meta.url).href,
                },
                {
                    id:2,
                    title:'比特币（btc）死亡交叉在此，狗狗币（doge）抹去另一个零，我们应该认为柴犬（shib）美元生命吗？',
                    text:'荷兰阿姆斯特丹，2024 年 9 月 18 日， chainwire token 2049 与会者可以收集...',
                    time:'2024-09-18 04:30:33',
                    imgURL:new URL('@/assets/image/home/licai2.png',import.meta.url).href,
                },
                {
                    id:3,
                    title:'主权自然倡议在新加坡 token 2049 上发布dotphin：polkadot 上的...',
                    text:'荷兰阿姆斯特丹，2024 年 9 月 18 日， chainwire token 2049 与会者可以收集...',
                    time:'2024-09-18 04:30:33',
                    imgURL:new URL('@/assets/image/home/licai2.png',import.meta.url).href,
                },
                {
                    id:4,
                    title:'中本聪时代的比特币矿工在一小时内 大规模苏醒一—发生了什么？',
                    text:'U.Today——今天早些时候，著名的区块链追 踪器 Whale Alert 传播了有关几个中本聪时...',
                    time:'2024-09-18 04:30:33',
                    imgURL:new URL('@/assets/image/home/licai2.png',import.meta.url).href,
                },
                {
                    id:5,
                    title:'Catizen 的 $CATI 代币在多家交易所 上市',
                    text:'新加坡，新加坡，2024年9月20日Chainwire Mantle 的旗舰游戏 Catizen 今天…',
                    time:'2024-09-20 13:00:39',
                    imgURL:new URL('@/assets/image/home/licai2.png',import.meta.url).href,
                },
            ]
        }
    },
    methods: {
        getIndex(index){
            return [0,1,2].includes(index)
        }
    },
}
</script>

<style lang="scss" scoped>
.homeNews{
    .homeNews-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .homeNews-main{
        background-color: #141416;
        border: 2px solid #1B1B1D;
        border-radius: 18px;
        padding: 10px;
        .main-box{
            display: flex;
            padding: 36px 26px;
            box-sizing: border-box;
            border-bottom: 2px solid #1B1B1D;
            &:nth-last-of-type(1){
                border-bottom: none;
            }
            .box-img{
                width: 232px;
                height: 222px;
                margin-right: 20px;
                border-radius: 12px;
            }
            .box-index{
                width: 44px;
                height: 44px;
                border-radius: 6px;
                font-size: 28px;
                display: inline-block;
                line-height: 44px;
                text-align: center;
                margin-right: 10px;
            }
            &:nth-of-type(1){
                .box-index{
                    background-color: #B9F547;
                    color: #000;
                }
            }
            &:nth-of-type(2){
                .box-index{
                    background-color: #EF6937;
                }
            }
            &:nth-of-type(3){
                .box-index{
                    background-color: #F5AA66;
                }
            }
        }
    }
}
</style>